<template>
	<s-layout class="article_wrap" title="商学院" navbar="inner">
		<!-- 搜索 -->
		<view class="u-p-20 u-bg-white u-flex u-col-center" >
			<view class="search_inner">
			  <uni-search-bar
			    class="ss-flex-1"
			    radius="33"
			    placeholder="请输入关键字"
			    cancelButton="none"
			    @blur="onSearch"
			  />
			</view>
		</view>
		<!-- 分类 -->
		<view class="u-border-top" v-if="data.isTab">
			<scroll-view class="scroll-view" id="scrollBar" :scroll-y="false" :scroll-x="true" :scroll-with-animation="true" :scroll-left="data.leftNum">
				<view class="item" v-for="(item,index) in data.tabList" @click="change(index)" :class="data.current==index?'active':''">
					<view class="item_text">
						{{item.title}}
					</view>
					<view class="select">
						
					</view>
				</view>
			</scroll-view>
			
			<!-- <u-tabs :list="data.tabList" :active-color="'#f2f2f2'" :bar-width="data.tabwidth" name="title" :is-scroll="true" :current="data.current" @change="change"></u-tabs> -->
			
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="false" autoplay :interval="3000"
				:duration="duration">
				<swiper-item v-for="item in data.bannerList">
					<view class="swiper-item">
						<image :src="item.image" mode=""></image>
						<view class="swiper_title">
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 列表 -->
		
		<view class="article_list" v-if="data.archivesList.length>0">
			<view class="article_item" v-for="item in data.archivesList" :key="item.id"  @tap="onOrderDetail(item.id)">
				<view class="article_img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="article_info">
					<view class="article_name">
						
						{{item.title}}
					</view>
					<view class="des">
						{{item.create_date}}
					</view>
					<view class="bottom">
						<view class="btn">
							<!-- <image src="/static/dianzan.png" mode=""></image> -->
							<text>关键字：{{item.keywords}}</text>
						</view>
					<!-- 	<view class="btn">
							<image src="/static/pinglun.png" mode=""></image>
							<text>{{item.comments}}评论</text>
						</view>
						<view class="btn">
							<image src="/static/liulan.png" mode=""></image>
							<text>{{item.views}}浏览</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-if="data.hasMore">
			暂无更多内容了
		</view>
	</s-layout>
</template>

<script setup>
	import { ref,reactive, computed,onMounted,nextTick,watch } from 'vue';
	import { onLoad, onPageScroll,onShow } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import { formatSales, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
	const data = reactive({
		is_show:true,
		isTab:true,
		is_update:false,
		tabList:[],
		tabwidth: 40,
		current: 0,
		status: 'nomore',
		page: 1,
		orderby:'default',
		orderway:'asc',
		channel_id: 0,
		filterList: [],
		orderList: [],
		archivesList: [],
		params:{},
		query:{},
		bannerList:[],
		hasMore:false,
		leftNum:0,
	})
	const scrollBar = ref(null)
	onShow(()=>{
		getArchives()
		getCategory()
		initdata()
	})
	
	const onSearch = async (e)=>{
		console.log(e)
		data.current = ''
		data.leftNum = 0
		data.params.name = e.value
		let params = {
			page:data.page,
			orderby:data.orderby,
			orderway:data.orderway,
			q:data.params.name
		}
		let res = await sheep.$api.article.search(params);
		let { filterList, orderList, pageList } = res.data;
		data.filterList = filterList;
		data.orderList = orderList;
		data.archivesList = [...pageList.data];
	}
	const initdata = async ()=>{
		let res = await sheep.$api.article.initData();
		if(res.code == 1){
			data.bannerList = res.data&&res.data.bannerList
		}else{
			sheep.$helper.toast(res.msg || '您的网络开小差了！');
		}
	}
	const getCategory = async ()=>{
		let res = await sheep.$api.article.getCategory(data.params);
		if(res.code == 1){
			data.tabList = res.data
			data.isTab = true
		}else{
			sheep.$helper.toast(res.msg || '您的网络开小差了！');
		}
	}
	const change = (index)=>{
		data.tabwidth = strlen(data.tabList[index].title) * 30;
		data.current = index;
		data.channel_id = data.tabList[index].id;
		data.is_update = true;
		data.page = 1;
		nextTick(()=>{
			let activeTabElement = document.querySelector('.active');
			if (activeTabElement&&activeTabElement.offsetLeft>=(window.innerWidth - activeTabElement.offsetWidth)) {
				data.leftNum =activeTabElement.offsetWidth;
			}
			if(activeTabElement&&activeTabElement.offsetLeft>=window.innerWidth){
				data.leftNum =(activeTabElement.offsetLeft-window.innerWidth)+activeTabElement.offsetWidth;
				
			}
			
		})
		
		getArchives();
	}
	const getArchives = async ()=>{
		let param = {
			page: data.page,
			...data.params,
			...data.query
		};
		if (data.channel_id) {
			param.channel = data.channel_id;
		}
		let res = await sheep.$api.article.getArchives(param);
		data.status = 'nomore';
		uni.stopPullDownRefresh();
		if (!res.code) {
			return;
		}
		
		let { filterList, orderList, pageList, channel } = res.data;
		data.filterList = filterList;
		data.orderList = orderList;
		data.channel = channel;
		// #ifdef MP-BAIDU
		if (data.channel) {
			// this.setPagesInfo();
		}
		// #endif
		if (data.is_update) {
			data.is_update = false;
			data.archivesList = [];
		}
		data.is_show = true;
		data.hasMore = pageList.current_page < pageList.last_page;
		data.archivesList = [...data.archivesList, ...pageList.data];
		data.is_empty = !data.archivesList.length;
	}
	// 工具函数
	function strlen(value) {
		//中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
		let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g;
		let mat = value.match(cnReg);
		let length = 0;
		if (mat) {
			return (length = mat.length + (value.length - mat.length) * 0.5);
		} else {
			return (length = value.length * 0.5);
		}
	}
	
  // 订单详情
  function onOrderDetail(id) {
    sheep.$router.go('/pages/article/detail', {
      id,
    });
  }
	
</script>

<style lang="scss" scoped>
	.article_list{
		width: 100%;
		height: auto;
		padding-bottom: 30px;
		.article_item{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 30rpx;
			background: #fff;
			border-bottom: 1px solid #e0e0e0;
			display: flex;
			.article_img{
				width: 220rpx;
				height: 160rpx;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.article_info{
				width: calc(100% - 240rpx);
				height: 160rpx;
				.article_name{
					width: 100%;
					height: 60rpx;
					font-size: 32rpx;
					line-height: 60rpx;
					font-weight: bold;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.des{
					width: 100%;
					height: 40rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
				}
				.bottom{
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					.btn{
						display: flex;
						margin-right: 25rpx;
						align-items: center;
						font-size: 24rpx;
						color: #aaaaaa;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 5rpx;
						}
					}
					
				}
			}
		}
	}
	.uni-margin-wrap{
		width: 100%;
		height: 320rpx;
		swiper{
			width: 100%;
			height: 100%;
			background: #eee;
			.swiper-item{
				width: 100%;
				height: 100%;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.swiper_title{
					width: 100%;
					height: 80rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 99;
					background: rgba(0,0,0,.3);
					box-sizing: border-box;
					padding: 20rpx 30rpx 0;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}
	.u-border-top{
		height: 90rpx;
		border-bottom: 1px solid #e0e0e0;
		background: #fff;
		.scroll-view{
			width: 100%;
			height: 100%;
			white-space: nowrap;
			.item{
				display: inline-block;
				width: auto;
				height: 100%;
				// line-height: 90rpx;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				font-size: 30rpx;
				color: rgb(48, 49, 51);
				text-align:center;
				.select{
					width: 20px;
					height: 4px;
					border-radius: 2px;
					background: #fff;
					margin: 5px auto 0;
				}
			}
			.active{
				font-weight: bold;
				.select{
					background-color: #1890FF;
				}
			}
		}
	}
	::v-deep .ui-fixed .ui-fixed-box.fixed{
		color: #333;
		background: #1890FF;
	}
	.search_inner{
		width: 100%;
		height: auto;
		box-sizing:border-box;
		padding:20rpx 30rpx;
		background: #1890FF;
	}
</style>
